import React, { useState, useEffect, useLayoutEffect } from "react";
import axios from "axios";

export default function Index() {

  const [count, setCount] = useState(0);
  const [persons, setPersons] = useState([]);

  function changeCount() {
    // 2、修改状态：
    setCount(count + 1);
    console.log("count", count);
  }

  //一、 useEffect
  //1、useEffect相当于：componentDidMount，componentDidUpdate。
  useEffect(() => {
    console.log("useEffect");
    axios({
      url: "http://localhost:3000/vips",
      params:{count}
    }).then((res) => {
      setPersons(res.data);
    });
  },[count]);

// 2、useEffect的第二个参数：表示依赖（的状态），当依赖的状态发生变化时，就会再次调用useEffect的回调函数。
//   1）、省略第二个参数（不写第二个参数），表示依赖所有（任何）状态，
//                此时，useEffect等价于componentDidMount + componentDidUpdate
//   2）、第二个参数如果是空数组，表示不依赖任何状态（即：任何状态发生变化，都不会调用useEffect的回调函数）。
//                此时，useEffect只等价于componentDidMount
//   3）、第二个参数写了某个依赖，如：[count,persons]，表示当count和persons被修改时，会调用useEffect的回调函数。
//                此时，useEffect等价于 componentDidMount + componentDidUpdate(仅表示count和persons引起的再次渲染)

  useLayoutEffect(()=>{
    console.log("useLayoutEffect");
  },[])

  return (
    <div>
      <h1>函数式组件里的生命周期：useEffect</h1>
      <p>count:{count}</p>
      <input type="button" value="修改count" onClick={changeCount} />
      <hr />
      <ul>
        {persons.map((person) => {
          return (
            <li key={person.id}>
              <p>姓名：{person.username}</p>
              <p>密码：{person.userpass}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
